<script setup lang="ts">
import { router } from '@/router';
import { PopoverAction, showToast } from 'vant';
import { ref } from 'vue';

const props = defineProps({
    name: String
});

const back = () => {
    router.push({ name: 'SubjectList' });
}
// const popover = ref({
//     showPopover: false,
//     actions: [
//         { text: '发起群聊', icon: 'chat' },
//         { text: '添加好友', icon: 'friends' },
//         { text: '扫一扫', icon: 'photograph' },
//     ],
// })
// const onSelect = (action: PopoverAction, index: number) => {
//     showToast(action.text);
//     if (index === 0) {
//         router.push("/add/friend");
//     } else {

//     }
// };
</script>

<template>
    <div class="container-icon">
        <div class="icon">
            <van-icon @click="back" name="arrow-left" size="32" />
        </div>
        <div class="center">
            <p style="margin: 0%; font-size: 15px;">{{ props.name }}</p>
        </div>
        <!-- <div class="right">
            <div class="popover">
                <van-popover  v-model:show="popover.showPopover" theme="dark"
                    placement="bottom-end" style="display: flex;" :overlay="true"
                    :actions="popover.actions" @select="onSelect">
                    <template #reference>
                        <van-icon name="add-o" size="32"/>
                    </template>
                </van-popover>
            </div>
        </div> -->
    </div>
</template>

<style lang="scss" scoped>
.container-icon {
    display: flex;
    background-color: white;
    flex-basis: 50px;
    flex-direction: row;
    align-items: center;
    border-bottom: 1px rgba(0, 0, 0, 0.13) solid;
    width: 100%;
    position: relative; /* 为子元素的绝对定位提供参考 */
    .icon {
        position: absolute; /* 绝对定位 */
        left: 16px; /* 距离左侧 16px */
        display: flex;
        align-items: center;
    }
    .center {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .right {
        margin-right: 3%;
    }
}
</style>